<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	</head>
	<body>
		<div id="draw">
			<el-alert :title="msg" type="success" :closable="false">
			</el-alert>
			<el-form>
			<el-form-item label="抽取人数">
				<el-input v-model="num" placeholder="输入抽取人数"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" round @click="dodraw">抽奖</el-button>
			</el-form-item>
			</el-form>
			<el-row :gutter="20">
			  <el-col :span="6" v-for="hit in hits">
				  <div style="text-align: center;height: 100px;width: 100px;">
				  	<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
				  	<div><span class="block">{{hit.sno}}</span></div>
				  	<div><span class="block">{{hit.name}}</span></div>
				  </div>
			  </el-col>
			</el-row>
		</div>
		<!-- 先引入 Vue -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			var app = new Vue({
				el: '#draw',
				data: {
					msg: "欢迎来到抽奖页面",
					num: 10,
					circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
					hits: [],
					row_size:0
				},
				methods: {
					dodraw() {
						var that = this
						axios.get("/students-papers/draw",{
							params:{num:that.num}
						}, {
						headers: {
 							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
						.then(function(res){
							that.hits = res.data;
							if(res.data.length==0){
								that.$message.error("无人中奖");
							}
						})
						.catch(function(error){
							console.log(error)
							that.$message.error(error);
						})
					}
				}
			});
		</script>
	</body>
</html>
